<template>
	<div class="login">
		<input type="text" v-model="user" name="" value="user">
		<input type="password" v-model="psd" name="" value="">
		<button type="" @click="login">登录</button>
        <button type="" @click="register">注册</button>
		<button type="" @click="logout">退出</button>
	</div>
	
</template>
<script>
import store from "@/store/store.js";
import * as types from "@/store/types";


export default {
  created() {
    // this.getPerson();
  },
  data() {
    return {
      value: "",
      user: "18856857227",
      psd: "123456",
      isReadonly: true,
      hrefTo: ""
    };
  },
  methods: {
    login() {
      var _user = this.user,
        _psd = this.psd;
      this.$axios
        .post("/api/login", {
          user: _user,
          psd: _psd
        })
        .then(res => {
          if (res.data == 1) {
            console.log("密码正确");
            window.localStorage.setItem("token", _user);
            console.log(store.state.hrefTo);
            store.commit(types.LOGIN, window.localStorage.getItem("token"));
            console.log(this.$route.query);
            this.$router.push(this.$route.query.redirect || "/");
          } else if (res.data == 2) {
            console.log("密码不正确");
          } else if (res.data == 3) {
            console.log("用户不存在");
          }
        })
        .catch(err => {
          console.log("发生错误");
        });
    },
    register() {
      var user = this.user,
        psd = this.psd;
      this.$axios
        .post("/api/register", {
          user: this.user,
          psd: this.psd,
          imgname: "aa.png"
        })
        .then(
          res => {
            console.log(res);
            if (res.data) {
              console.log("注册成功");
            } else {
              console.log("用户已存在");
            }
          },
          err => {
            console.log("发生错误");
            console.log(err);
          }
        );
    },
    logout() {
      store.commit(types.LOGOUT, window.localStorage.getItem("token"));

      this.$router.replace({ path: '/home' })
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.login {
  width: 300px;
  margin: 0 auto;
}
input {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
}
</style>